<template>
  <div class="edit-wrapper">
    <el-dialog :title="title" :close-on-click-modal="false" v-dialogDrag :visible.sync="visible">
      <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''" :disabled="method==='view'"
               label-width="450px"
        >
        <el-table
          border
          :data="tableData"
          style="width: 100%">
          <el-table-column prop="number" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.conditions === 0">第{{scope.row.number | toChinese}}张卡</span>
              <span v-if="scope.row.conditions === 1">第{{scope.row.number | toChinese}}张卡之后</span>
            </template>
          </el-table-column>
          <el-table-column prop="moneys" width="200">
            <template slot-scope="scope">
              <span v-if="scope.row.conditions === 0"><el-input v-model="scope.row.moneys" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"></el-input>元</span>
              <span v-if="scope.row.conditions === 1"><el-input v-model="scope.row.moneys" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"></el-input>元/张</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
        <el-button @click="visible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        tableData: [],
        inputForm: {
          id: '',
          ids: '',
          axle: '',
          moneys: '',
          loadingFee: 0,
          floatUnloadingFee: 0,
          dumpUnloadingFee: 0
        }
      }
    },
    components: {},
    methods: {
    	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
      init (method, id) {
        this.method = method
        if (method === 'edit') {
          this.title = '磁卡收费标准设置'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          if (method === 'edit') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/truck/cardFee/list`,
              method: 'get'
            }).then(({
              data
            }) => {
              this.tableData = data.result
              this.loading = false
            })
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true

            this.$http({
              url: `/truck/cardFee/save`,
              method: 'post',
              data: this.tableData,
              headers: {'Content-Type': 'application/json; charset=utf-8'}
            }).then(({
              data
            }) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success('已保存')
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .edit-wrapper{
    ::v-deep.el-dialog{
      .el-form{
        .el-tabs__active-bar{
          display: none;
        }
        .el-row:first-child{
          .el-input__inner{
            width: 320px;
          }
        }
        .el-row:nth-child(2){
          .el-input__inner{
            width: 294px;
          }
        }
        .el-input-group__append{
          background: transparent;
          border: none;
          padding: 0 0 0 10px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
        .more-content{
          display: flex;
          .right-content{
            margin-left: -10px;
          }
          .right-content>div{
            margin-bottom: 20px;
            display: block;
            width: 100%;

            .el-input__inner{
              width: 224px;
            }

          }
        }

      }
    }
  }
</style>
